<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery_mobile.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery_mobile.js"></script>
    <script src="js/search.js"></script>
</head>
<body> 

<div data-role="page">
    <div data-role="header">
        <h1>Reebonz Search</h1>
        <a href="http://reebonz.com">Reebonz</a>
    </div><!-- /header -->

    <div data-role="content">
        <form action="get_product.php" method="GET" data-ajax="false">
            <input type="text" name="page" id="page" value="1" style="display:none"/>
            <label for="keyword">Keyword:</label>
            <input type="search" name="keyword" id="keyword" value=""/>

            <div id="advance_option_toggle" data-role="button" data-icon="arrow-d">Advance Options</div>
            <div id="advance_option">
                <label for="price">Price range</label>
                <select name="price" id="price">
                    <option value="">Any</option>
                    <option value="0 500">Under $500</option>
                    <option value="500 999">$500 - $999</option>
                    <option value="1000 2499">$1,000 - $2,499</option>
                    <option value="2500 9999">$2,500 - $9,999</option>
                    <option value="10000 19999">$10,000 - $19,999</option>
                    <option value="20000 999999999">$20,000 and above</option>
                </select>

                <label for="categories">Categories</label>
                <select name="categories" id="categories">
                    <option value="">Any</option>
                    <option value="bag">Handbag</option>
                    <option value="necklace">Necklace</option>
                    <option value="toy">Toy</option>
                    <option value="glasses">Glasses</option>
                    <option value="wallet">Wallet</option>
                </select>

                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Gender</legend>
                    <input type="radio" value="" name="gender" id="gender-0" checked="checked"/>
                    <label for="gender-0">Any</label>
                    <input type="radio" value="Male" name="gender" id="gender-1"/>
                    <label for="gender-1">Male</label>
                    <input type="radio" value="Female" name="gender" id="gender-2"/>
                    <label for="gender-2">Female</label>
                </fieldset>

                <input type="text" name="brand" id="brand" value="" style="display:none"/>
                <fieldset data-role="controlgroup">
                    <legend>Brand</legend>
                    <?php $i = 0; $brands = array('Cuisipro', 'Pomikaki', 'Noodoll', 'Prada', 'Dior', 'Tod\'s', 'Givenchy'); ?>
                    <?php foreach($brands as $brand) { ++$i; ?>
                        <input type="checkbox" name="<?= $i ?>-brand" id="<?= $i ?>-brand" class="brand" value="<?= $brand ?>"/>
                        <label for="<?= $i ?>-brand"><?= $brand ?></label>
                    <?php } ?>
                </fieldset>
				
				<label for="colors">Color</label>
                <select name="colors" id="colors">
                    <option value="">Any</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="orange">Orange</option>
                    <option value="black">Black</option>
					<option value="brown">Brown</option>
					<option value="white">White</option>
                </select>
            </div>
            <input type="submit" data-role="button" data-icon="search" value="Search"/>
        </form>
    </div><!-- /content -->
</div><!-- /page -->

</body>
</html>
